<template>
  <div style="position: relative">
    <px-row style="height: 64px">
      <px-col :span="24" class="water_col">
        <div class="waterdom borderRidus boxShadow">
          <px-form ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
            <!-- <px-button style="margin-top: -17px" type="primary" icon="">水量统计</px-button>
            <px-button style="margin-top: -17px" type="primary" icon="">抄表记录</px-button> -->

            <!-- <px-button style="margin-top: -17px" type="primary" plain>导出</px-button> -->
            <!-- <px-button style="margin-top: -17px; type="primary" plain>历史</px-button> -->
            <px-form-item label="日期">
              <px-date-picker
                v-model="queryParams.startTime"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择"
              />
            </px-form-item>
            <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery()">查询</px-button>
            <!-- <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button> -->
            <px-button style="margin-top: -17px" type="primary" plain @click="printFile()">打印</px-button>
            <p style="float: right; margin-top: 5px">
              <span style="color: #3b82f6">今日抄表[{{ Statusvalue.confirmStatus }}] </span>
              <span
                ><span style="font-weight: 600">水量异常 </span>OOS
                <span style="color: #3b82f6">{{ Statusvalue.waterOOS ? Statusvalue.waterOOS : "-" }}个</span> OOW
                <span style="color: #3b82f6">{{ Statusvalue.waterOOW ? Statusvalue.waterOOW : "-" }}个</span>OOC
                <span style="color: #3b82f6">{{ Statusvalue.waterOOC ? Statusvalue.waterOOC : "-" }}个</span>
                <span style="font-weight: 600">平衡异常</span>
                <span style="color: #3b82f6">{{ Statusvalue.balanceWarn ? Statusvalue.balanceWarn : "-" }}个</span></span
              >
            </p>
          </px-form>
        </div>
      </px-col>
    </px-row>

    <div id="print-content" ref="tableElement">
      <px-row style="margin-top: 16px">
        <px-col :span="24" class="water_col">
          <px-scrollbar class="waterdom borderRidus boxShadow">
            <div
              ref="el"
              v-drag
              class="iframe-content"
              :style="{
                transform: `scale(${imgscale})`,
                transformOrigin: '0 0' // 关键点：确保缩放从左上角开始
              }"
              @v-drag-end="onDragEnd"
            >
              <img class="waterImg" src="@/assets/images/water/water.png" />
              <!-- 超纯水系统生产线 -->
              <waterFire v-if="getwarring2('超纯水系统')" class="waterimg waterimg8" :type="'报警'" />
              <!-- 超纯水系统验证线 -->
              <waterFire v-if="getwarring2('验证线系统')" class="waterimg waterimg9" :type="'报警'" />
              <!-- 中水系统1 -->
              <waterFire v-if="getwarring2('中水系统1')" class="waterimg waterimg10" :type="'报警'" />
              <!-- 冷凝水回收系统 -->
              <waterFire v-if="getwarring('冷凝水回收水')" class="waterimg waterimg11" :type="'报警'" />
              <!-- 雨水回收系统 -->
              <waterFire v-if="getwarring2('雨水回用系统')" class="waterimg waterimg12" :type="'报警'" />
              <!-- 中水系统2 -->
              <waterFire v-if="getwarring2('中水系统2')" class="waterimg waterimg13" :type="'报警'" />
              <!-- 生活给水系统 -->
              <waterFire v-if="getwarring2('生活给水系统')" class="waterimg waterimg14" :type="'报警'" />
              <!-- 未预见及漏失水量 -->
              <waterFire v-if="getwarring('未预见及漏失水量')" class="waterimg waterimg15" :type="'报警'" />
              <!-- 制程用水 -->
              <waterFire v-if="getwarring2('制程用水')" class="waterimg waterimg16" :type="'报警'" />
              <!-- LOCAL SCRUBBER -->
              <waterFire v-if="getwarring2('LOCAL SCRUBBER')" class="waterimg waterimg17" :type="'报警'" />
              <!-- 酸性废水处理塔 -->
              <waterFire v-if="getwarring2('酸性废水处理塔（碱性废水处理塔）')" class="waterimg waterimg18" :type="'报警'" />
              <!-- 碱性废水处理塔 -->
              <waterFire v-if="getwarring2('酸性废水处理塔（碱性废水处理塔）')" class="waterimg waterimg19" :type="'报警'" />
              <!-- 动力用冷却用水循环系统 -->
              <waterFire v-if="getwarring2('动力用冷却循环水系统')" class="waterimg waterimg20" :type="'报警'" />
              <!-- 废水站 -->
              <!-- <waterFire class="waterimg waterimg21" :type="'报警'" /> -->
              <!-- 冲厕 -->
              <waterFire v-if="getwarring2('冲厕')" class="waterimg waterimg22" :type="'报警'" />
              <!-- 停车场冲洗用水 -->
              <waterFire v-if="getwarring2('停车场冲洗用水')" class="waterimg waterimg23" :type="'报警'" />
              <!-- 道路、绿化用水 -->
              <waterFire v-if="getwarring('绿化用中水量')" class="waterimg waterimg24" :type="'报警'" />
              <!-- 生活用水 -->
              <waterFire v-if="getwarring2('生活用水')" class="waterimg waterimg25" :type="'报警'" />
              <!-- 食堂用水 -->
              <waterFire v-if="getwarring2('食堂用水')" class="waterimg waterimg26" :type="'报警'" />
              <!-- 化粪池 -->
              <waterFire v-if="getwarring2('化粪池')" class="waterimg waterimg27" :type="'报警'" />
              <!-- 隔油器、隔油池 -->
              <waterFire v-if="getwarring2('隔油器、隔油池')" class="waterimg waterimg28" :type="'报警'" />
              <!-- 生活污水处理装置 -->
              <waterFire v-if="getwarring2('生活污水处理装置')" class="waterimg waterimg29" :type="'报警'" />
              <!-- 含氨废水系统 -->
              <waterFire v-if="getwarring2('含氨废水系统')" class="waterimg waterimg30" :type="'报警'" />
              <!-- 含氟废水系统 -->
              <waterFire v-if="getwarring2('含氟废水系统')" class="waterimg waterimg31" :type="'报警'" />
              <!-- 含铜废水系统 -->
              <waterFire v-if="getwarring2('含铜废水系统')" class="waterimg waterimg32" :type="'报警'" />
              <!-- 含钴废水系统 -->
              <waterFire v-if="getwarring2('含钴废水系统')" class="waterimg waterimg33" :type="'报警'" />
              <!-- 酸碱废水系统 -->
              <waterFire v-if="getwarring2('酸碱废水系统')" class="waterimg waterimg34" :type="'报警'" />
              <!-- 事故池 -->
              <!-- <waterFire class="waterimg waterimg35" :type="'报警'" /> -->
              <!-- 厂区污水排放口 -->
              <waterFire v-if="getwarring2('厂区污水排放口')" class="waterimg waterimg36" :type="'报警'" />
              <!-- 市政再生水进水量 -->
              <px-tooltip class="box-item" effect="dark" content="市政再生水总量" placement="top">
                <p class="waterp waterp1" @click="getSPCcharts('市政再生水进水量')">{{ getScdvalue("市政再生水进水量") }}</p>
              </px-tooltip>
              <px-tooltip class="box-item" effect="dark" content="市政再生水进水修正水量" placement="top">
                <p class="waterp1-2" @click="getSPCcharts('市政再生水进水量')">修正水量：{{ getScdvalue("市政再生水进水量") }}</p>
              </px-tooltip>

              <waterFire v-if="getwarring('市政再生水进水量')" class="waterimg waterimg1" :type="'报警'" />
              <!-- 市政自来水 -->
              <px-tooltip class="box-item" effect="dark" content="市政自来水总量" placement="top">
                <p class="waterp waterp2" @click="getSPCcharts('市政自来水')">{{ getScdvalue("市政自来水") }}</p>
              </px-tooltip>

              <waterFire v-if="getwarring('市政自来水')" class="waterimg waterimg2" :type="'报警'" />
              <!-- MAU排水 -->
              <px-tooltip class="box-item" effect="dark" content="MAU排水" placement="top">
                <p class="waterp waterp3" @click="getSPCcharts('MAU排水')">{{ getScdvalue("MAU排水") }}</p>
              </px-tooltip>
              <waterFire v-if="getwarring2('MAU加湿补水（工艺循环冷却水系统）')" class="waterimg waterimg3" :type="'报警'" />
              <!-- PCW排水 -->
              <px-tooltip class="box-item" effect="dark" content="PCW排水" placement="top">
                <p class="waterp waterp4" @click="getSPCcharts('PCW排水')">{{ getScdvalue("PCW排水") }}</p>
              </px-tooltip>

              <!--  -->
              <px-tooltip class="box-item" effect="dark" content="原水进水" placement="top">
                <p class="waterp waterp112" @click="getSPCcharts('生产线原水进水')">{{ getScdvalue("生产线原水进水") }}</p>
              </px-tooltip>

              <!--  -->
              <!-- <px-tooltip class="box-item" effect="dark" content="生产线原水进水" placement="top">
                <p class="waterp waterp113" @click="getSPCcharts('生产线原水进水')">{{ getScdvalue("生产线原水进水") }}</p>
              </px-tooltip> -->
              <!-- 验证线产水量 -->
              <px-tooltip class="box-item" effect="dark" content="验证线产水去生产线水量" placement="top">
                <p class="waterp waterp114" @click="getSPCcharts('验证线产水去生产线水量')">{{ getScdvalue("验证线产水量") }}</p>
              </px-tooltip>

              <!-- 验证线自来水进水 -->
              <px-tooltip class="box-item" effect="dark" content="原水进水" placement="top">
                <p class="waterp waterp115" @click="getSPCcharts('验证线自来水进水')">{{ getScdvalue("验证线产水量") }}</p>
              </px-tooltip>

              <!-- 验证线自来水进水 -->
              <px-tooltip class="box-item" effect="dark" content="原水进水" placement="top">
                <p class="waterp waterp116" @click="getSPCcharts('验证线自来水进水')">{{ getScdvalue("验证线产水量") }}</p>
              </px-tooltip>

              <waterFire v-if="getwarring2('MAU加湿补水（工艺循环冷却水系统）')" class="waterimg waterimg4" :type="'报警'" />
              <!-- PCW/MAU用水 -->
              <px-tooltip class="box-item" effect="dark" content="PCW/MAU用水" placement="top">
                <p class="waterp waterp5" @click="getSPCcharts('PCW/MAU用水')">{{ getScdvalue("PCW/MAU用水") }}</p>
              </px-tooltip>

              <!-- 生产线反洗水回收 -->
              <px-tooltip class="box-item" effect="dark" content="反洗再生回收" placement="top">
                <p class="waterp waterp6" @click="getSPCcharts('生产线反洗水回收')">{{ getScdvalue("生产线反洗水回收") }}</p>
              </px-tooltip>

              <waterFire v-if="getwarring2('MAU加湿补水（工艺循环冷却水系统）')" class="waterimg waterimg6" :type="'报警'" />
              <!-- 生产线原水进水 -->
              <!-- <waterFire v-if="getwarring('生产线原水进水')" class="waterimg waterp7" :type="'报警'" /> -->
              <!-- <px-tooltip class="box-item" effect="dark" content="生产线原水进水" placement="top">
                <p class="waterp waterp7" @click="getSPCcharts('生产线原水进水')">{{ getScdvalue("生产线原水进水") }}</p>
              </px-tooltip> -->

              <!-- 生产线UFconc. -->
              <px-tooltip class="box-item" effect="dark" content="UF浓水." placement="top">
                <p class="waterp waterp9" @click="getSPCcharts('生产线UFconc.')">{{ getScdvalue("生产线UFconc.") }}</p>
              </px-tooltip>

              <!-- 生产线RO水排放 -->
              <px-tooltip class="box-item" effect="dark" content="生产线RO水排放" placement="top">
                <p class="waterp waterp10" @click="getSPCcharts('生产线RO水排放')">{{ getScdvalue("生产线RO水排放") }}</p>
              </px-tooltip>

              <!-- 验证线UFconc. -->
              <px-tooltip class="box-item" effect="dark" content="验证线UFconc." placement="top">
                <p class="waterp waterp11" @click="getSPCcharts('验证线UFconc.')">{{ getScdvalue("验证线UFconc.") }}</p>
              </px-tooltip>

              <!-- 验证线RO水排放 -->
              <px-tooltip class="box-item" effect="dark" content="验证线RO水排放" placement="top">
                <p class="waterp waterp12" @click="getSPCcharts('验证线RO水排放')">{{ getScdvalue("验证线RO水排放") }}</p>
              </px-tooltip>

              <!-- 验证线反洗水回收 -->
              <px-tooltip class="box-item" effect="dark" content="反洗再生回收" placement="top">
                <p class="waterp waterp25" @click="getSPCcharts('验证线反洗水回收')">{{ getScdvalue("验证线反洗水回收") }}</p>
              </px-tooltip>

              <!-- 验证线生产水量 -->
              <px-tooltip class="box-item" effect="dark" content="验证线生产水量" placement="top">
                <p class="waterp waterp13" @click="getSPCcharts('验证线产水量')">{{ getScdvalue("验证线产水量") }}</p>
              </px-tooltip>

              <!-- 再生水进中水池1 -->
              <px-tooltip class="box-item" effect="dark" content="市政再生水进中水池1水量" placement="top">
                <p class="waterp waterp14" @click="getSPCcharts('再生水进中水池1水量')">{{ getScdvalue("再生水进中水池1水量") }}</p>
              </px-tooltip>

              <!-- 中水系统1供水量 -->
              <px-tooltip class="box-item" effect="dark" content="中水系统1供水量" placement="top">
                <p class="waterp waterp26" @click="getSPCcharts('中水系统1供水量')">{{ getScdvalue("中水系统1供水量") }}</p>
              </px-tooltip>

              <!-- 自来水进中水池1 -->
              <px-tooltip class="box-item" effect="dark" content="市政自来水进中水池1水量" placement="top">
                <p class="waterp waterp15" @click="getSPCcharts('自来水进中水池1水量')">{{ getScdvalue("自来水进中水池1水量") }}</p>
              </px-tooltip>

              <!-- 冷凝水回收 -->
              <px-tooltip class="box-item" effect="dark" content="冷凝水回收" placement="top">
                <p class="waterp waterp16" @click="getSPCcharts('冷凝水回收水')">{{ getScdvalue("冷凝水回收水") }}</p>
              </px-tooltip>

              <!-- LSR自来水补水 -->
              <px-tooltip class="box-item" effect="dark" content="LSR自来水补水" placement="top">
                <p class="waterp waterp17" @click="getSPCcharts('LSR自来水补水')">{{ getScdvalue("LSR自来水补水") }}</p>
              </px-tooltip>
              <!-- 雨水回收系统进水 -->
              <px-tooltip class="box-item" effect="dark" content="雨水回收系统进水" placement="top">
                <p class="waterp waterp18" @click="getSPCcharts('雨水回收系统进水')">{{ getScdvalue("雨水回收系统进水") }}</p>
              </px-tooltip>
              <!-- 雨水回收系统外排 -->
              <px-tooltip class="box-item" effect="dark" content="雨水回收系统外排" placement="top">
                <p class="waterp waterp23" @click="getSPCcharts('雨水回收系统外排')">{{ getScdvalue("雨水回收系统外排") }}</p>
              </px-tooltip>
              <!-- 雨水回收水量 -->
              <px-tooltip class="box-item" effect="dark" content="雨水回收水量" placement="top">
                <p class="waterp waterp24" @click="getSPCcharts('雨水回收水量')">{{ getScdvalue("雨水回收水量") }}</p>
              </px-tooltip>
              <!-- 市政再生水进中水 -->
              <px-tooltip class="box-item" effect="dark" content="市政再生水进中水" placement="top">
                <p class="waterp waterp19" @click="getSPCcharts('市政再生水进中水池2水量')">{{ getScdvalue("市政再生水进中水池2水量") }}</p>
              </px-tooltip>
              <!-- 市政自来水进中水 -->
              <px-tooltip class="box-item" effect="dark" content="市政自来水进中水" placement="top">
                <p class="waterp waterp20" @click="getSPCcharts('市政自来水进中水池2水量')">{{ getScdvalue("市政自来水进中水池2水量") }}</p>
              </px-tooltip>
              <!-- 自来水进生活水箱 -->
              <px-tooltip class="box-item" effect="dark" content="市政自来水进生活水箱水量" placement="top">
                <p class="waterp waterp21" @click="getSPCcharts('自来水进生活水箱水量')">{{ getScdvalue("自来水进生活水箱水量") }}</p>
              </px-tooltip>
              <!-- 未预见及漏失水量 -->
              <px-tooltip class="box-item" effect="dark" content="未预见及漏失水量" placement="top">
                <p class="waterp waterp22" @click="getSPCcharts('未预见及漏失水量')">{{ getScdvalue("未预见及漏失水量") }}</p>
              </px-tooltip>
              <!-- 验证线反洗再生排废 -->
              <px-tooltip class="box-item" effect="dark" content="验证线反洗再生排废" placement="top">
                <p class="waterp waterp27" @click="getSPCcharts('验证线反洗再生排废')">{{ getScdvalue("验证线反洗再生排废") }}</p>
              </px-tooltip>

              <!-- 生产线反洗再生排废 -->
              <px-tooltip class="box-item" effect="dark" content="生产线反洗再生排废" placement="top">
                <p class="waterp waterp28" @click="getSPCcharts('生产线反洗再生排废')">{{ getScdvalue("生产线反洗再生排废") }}</p>
              </px-tooltip>

              <!-- 验证线RO浓水排放量 -->
              <px-tooltip class="box-item" effect="dark" content="验证线RO浓水排放量" placement="top">
                <p class="waterp waterp29" @click="getSPCcharts('验证线RO浓水排放量')">{{ getScdvalue("验证线RO浓水排放量") }}</p>
              </px-tooltip>

              <!-- 生产线RO浓水排放量 -->
              <px-tooltip class="box-item" effect="dark" content="生产线RO浓水排放量" placement="top">
                <p class="waterp waterp30" @click="getSPCcharts('生产线RO浓水排放量')">{{ getScdvalue("生产线RO浓水排放量") }}</p>
              </px-tooltip>

              <!-- 反洗再生排废 -->
              <px-tooltip class="box-item" effect="dark" content="反洗再生排废" placement="top">
                <p class="waterp waterp31" @click="getSPCcharts('反洗再生排废')">{{ getScdvalue("验证线反洗再生排废") }}</p>
              </px-tooltip>

              <!-- RO浓水排废 -->
              <px-tooltip class="box-item" effect="dark" content="RO浓水排废" placement="top">
                <p class="waterp waterp32" @click="getSPCcharts('RO浓水排废')">{{ getScdvalue("RO浓水排废") }}</p>
              </px-tooltip>

              <!-- UPW至LSR补水前未找到的指标 暂无-->
              <!-- <px-tooltip class="box-item" effect="dark" content="RO浓水排废" placement="top">
                <p class="waterp waterp33" @click="getSPCcharts('RO浓水排废')">{{ getScdvalue("RO浓水排废") }}</p>
              </px-tooltip> -->
              <p class="waterp waterp33" />
              <!-- UPW至LSR补水 -->
              <px-tooltip class="box-item" effect="dark" content="UPW至LSR补水" placement="top">
                <p class="waterp waterp34" @click="getSPCcharts('UPW至LSR补水')">{{ getScdvalue("UPW至LSR补水") }}</p>
              </px-tooltip>

              <!-- L/R回收至T-201 -->
              <px-tooltip class="box-item" effect="dark" content="L/R回收（至T-201）" placement="top">
                <p class="waterp waterp35" @click="getSPCcharts('L/R回收至T-201')">{{ getScdvalue("L/R回收至T-201") }}</p>
              </px-tooltip>

              <!-- F/R回收至T-201 -->
              <px-tooltip class="box-item" effect="dark" content="F/R回收（至T-201）" placement="top">
                <p class="waterp waterp36" @click="getSPCcharts('F/R回收至T-201')">{{ getScdvalue("F/R回收至T-201") }}</p>
              </px-tooltip>

              <!-- 水池存水 -->
              <px-tooltip class="box-item" effect="dark" content="水池存水" placement="top">
                <p class="waterp waterp37" @click="getSPCcharts('水池存水')">{{ getScdvalue("水池存水") }}</p>
              </px-tooltip>
              <!-- F/R排放 -->
              <px-tooltip class="box-item" effect="dark" content="F/R排放" placement="top">
                <p class="waterp waterp38" @click="getSPCcharts('F/R排放')">{{ getScdvalue("F/R排放") }}</p>
              </px-tooltip>
              <!-- L/R排放 -->
              <px-tooltip class="box-item" effect="dark" content="L/R排放" placement="top">
                <p class="waterp waterp39" @click="getSPCcharts('L/R排放')">{{ getScdvalue("L/R排放") }}</p>
              </px-tooltip>
              <!-- UPW用水量 -->
              <px-tooltip class="box-item" effect="dark" content="UPW用水量" placement="top">
                <p class="waterp waterp40" @click="getSPCcharts('UPW用水量')">{{ getScdvalue("UPW用水量") }}</p>
              </px-tooltip>
              <!-- 验证线产水量 -->
              <px-tooltip class="box-item" effect="dark" content="验证线产水量去制程水量" placement="top">
                <p class="waterp waterp117" @click="getSPCcharts('验证线产水量去制程水量')">{{ getScdvalue("验证线产水量") }}</p>
              </px-tooltip>
              <!-- L/R回收至T-201 -->
              <px-tooltip class="box-item" effect="dark" content="L/R回收至T-201" placement="top">
                <p class="waterp waterp41" @click="getSPCcharts('L/R回收至T-201')">{{ getScdvalue("L/R回收至T-201") }}</p>
              </px-tooltip>
              <!-- 纯水排至AWW系统水量 1-->
              <px-tooltip class="box-item" effect="dark" content="纯水排至AWW系统水量" placement="top">
                <p class="waterp waterp42" @click="getSPCcharts('纯水排至AWW系统水量')">{{ getScdvalue("纯水排至AWW系统水量") }}</p>
              </px-tooltip>

              <!-- 纯水排至AWW系统水量 2 -->
              <px-tooltip class="box-item" effect="dark" content="纯水排至AWW系统水量" placement="top">
                <p class="waterp waterp43" @click="getSPCcharts('纯水排至AWW系统水量')">{{ getScdvalue("纯水排至AWW系统水量") }}</p>
              </px-tooltip>
              <!-- 各系统排至酸碱系统1 -->
              <px-tooltip class="box-item" effect="dark" content="各系统排至酸碱系统1" placement="top">
                <p class="waterp waterp44" @click="getSPCcharts('各系统排至酸碱系统1')">{{ getScdvalue("各系统排至酸碱系统1") }}</p>
              </px-tooltip>
              <!-- 各系统排至酸碱系统2 -->
              <px-tooltip class="box-item" effect="dark" content="各系统排至酸碱系统2" placement="top">
                <p class="waterp waterp45" @click="getSPCcharts('各系统排至酸碱系统2')">{{ getScdvalue("各系统排至酸碱系统2") }}</p>
              </px-tooltip>
              <!-- 各系统排至酸碱系统4 -->
              <px-tooltip class="box-item" effect="dark" content="各系统排至酸碱系统4" placement="top">
                <p class="waterp waterp46" @click="getSPCcharts('各系统排至酸碱系统4')">{{ getScdvalue("各系统排至酸碱系统4") }}</p>
              </px-tooltip>
              <!-- 总排放量 -->
              <px-tooltip class="box-item" effect="dark" content="酸碱系统排放量（总排水量）" placement="top">
                <p class="waterp waterp47" @click="getSPCcharts('总排放量')">{{ getScdvalue("总排放量") }}</p>
              </px-tooltip>

              <!-- 含氨废水排水量 -->
              <px-tooltip class="box-item" effect="dark" content="含氨废水排水量" placement="top">
                <p class="waterp waterp48" @click="getSPCcharts('含氨废水排水量')">{{ getScdvalue("含氨废水排水量") }}</p>
              </px-tooltip>
              <!-- 含氟废水排水量 -->
              <px-tooltip class="box-item" effect="dark" content="含氟废水排水量" placement="top">
                <p class="waterp waterp49" @click="getSPCcharts('含氟废水排水量')">{{ getScdvalue("含氟废水排水量") }}</p>
              </px-tooltip>
              <!-- CMP废水 -->
              <px-tooltip class="box-item" effect="dark" content="CMP废水排放量" placement="top">
                <p class="waterp waterp50" @click="getSPCcharts('CMP废水')">{{ getScdvalue("CMP废水") }}</p>
              </px-tooltip>
              <!-- 含铜废水排水量 -->
              <px-tooltip class="box-item" effect="dark" content="含铜废水排水量" placement="top">
                <p class="waterp waterp51" @click="getSPCcharts('含铜系统出水量')">{{ getScdvalue("含铜系统出水量") }}</p>
              </px-tooltip>
              <!-- 含钴废水排水量 -->
              <px-tooltip class="box-item" effect="dark" content="含钴废水排水量" placement="top">
                <p class="waterp waterp52" @click="getSPCcharts('含钴系统出水量')">{{ getScdvalue("含钴系统出水量") }}</p>
              </px-tooltip>
              <!-- 酸碱废水排水量 -->
              <px-tooltip class="box-item" effect="dark" content="酸碱废水排水量" placement="top">
                <p class="waterp waterp53" @click="getSPCcharts('酸碱废水排水量')">{{ getScdvalue("酸碱废水排水量") }}</p>
              </px-tooltip>
              <!-- LSR排放 -->
              <px-tooltip class="box-item" effect="dark" content="LSR排放量" placement="top">
                <p class="waterp waterp54" @click="getSPCcharts('LSR排放')">{{ getScdvalue("LSR排放") }}</p>
              </px-tooltip>
              <!-- LSR再生废水排水 -->
              <px-tooltip class="box-item" effect="dark" content="LSR再生废水排放" placement="top">
                <p class="waterp waterp55" @click="getSPCcharts('LSR再生废水排水')">{{ getScdvalue("LSR再生废水排水") }}</p>
              </px-tooltip>
              <!-- 酸碱废水系统排水量 -->
              <px-tooltip class="box-item" effect="dark" content="酸性废水系统排水量" placement="top">
                <p class="waterp waterp56" @click="getSPCcharts('酸性废水系统排水量')">{{ getScdvalue("酸碱废水排水量") }}</p>
              </px-tooltip>
              <!-- 碱性废水系统排水量 -->
              <px-tooltip class="box-item" effect="dark" content="碱性废水系统排水量" placement="top">
                <p class="waterp waterp57" @click="getSPCcharts('碱性废水系统排水量')">{{ getScdvalue("酸碱废水排水量") }}</p>
              </px-tooltip>
              <!-- 冷却水塔排水 -->
              <px-tooltip class="box-item" effect="dark" content="冷却水塔排水" placement="top">
                <p class="waterp waterp58" @click="getSPCcharts('冷却水塔排水')">{{ getScdvalue("冷却水塔排水") }}</p>
              </px-tooltip>

              <!-- 含氨系统进水 -->
              <!-- <px-tooltip class="box-item" effect="dark" content="冷却水塔排水" placement="top">
                <p class="waterp waterp57" @click="getSPCcharts('冷却水塔排水')">{{ getScdvalue("冷却水塔排水") }}</p>
              </px-tooltip> -->
              <!-- <p class="waterp waterp59">暂无</p> -->
              <px-tooltip class="box-item" effect="dark" content="含氨系统出水量" placement="top">
                <p class="waterp waterp59" @click="getSPCcharts('含氨系统出水量')">{{ getScdvalue("含氨系统出水量") }}</p>
              </px-tooltip>
              <!-- 含氟系统进水 -->
              <px-tooltip class="box-item" effect="dark" content="含氟系统进水" placement="top">
                <p class="waterp waterp60" @click="getSPCcharts('含氟系统进水')">{{ getScdvalue("含氟系统进水") }}</p>
              </px-tooltip>
              <!-- 含铜系统进水 -->
              <!-- <px-tooltip class="box-item" effect="dark" content="含氟系统进水" placement="top">
                <p class="waterp waterp60" @click="getSPCcharts('含氟系统进水')">{{ getScdvalue("含氟系统进水") }}</p>
              </px-tooltip> -->
              <px-tooltip class="box-item" effect="dark" content="含铜系统出水量" placement="top">
                <p class="waterp waterp61" @click="getSPCcharts('含铜系统出水量')">{{ getScdvalue("含铜系统出水量") }}</p>
              </px-tooltip>
              <!-- 含钴系统进水 -->
              <!-- <px-tooltip class="box-item" effect="dark" content="冷却水塔排水" placement="top">
                <p class="waterp waterp58" @click="getSPCcharts('冷却水塔排水')">{{ getScdvalue("冷却水塔排水") }}</p>
              </px-tooltip> -->
              <!-- <p class="waterp waterp62">暂无</p> -->
              <px-tooltip class="box-item" effect="dark" content="含钴系统出水量" placement="top">
                <p class="waterp waterp62" @click="getSPCcharts('含钴系统出水量')">{{ getScdvalue("含钴系统出水量") }}</p>
              </px-tooltip>
              <!-- 各系统排至酸碱系统3 -->
              <px-tooltip class="box-item" effect="dark" content="各系统排至酸碱系统3" placement="top">
                <p class="waterp waterp63" @click="getSPCcharts('各系统排至酸碱系统3')">{{ getScdvalue("各系统排至酸碱系统3") }}</p>
              </px-tooltip>
              <!-- 酸碱废水至事故池水量 -->
              <px-tooltip class="box-item" effect="dark" content="酸碱废水至事故池1水量" placement="top">
                <p class="waterp waterp64" @click="getSPCcharts('酸碱废水至事故池水量')">{{ getScdvalue("酸碱废水至事故池水量") }}</p>
              </px-tooltip>

              <!-- 含氨系统出水量 -->
              <px-tooltip class="box-item" effect="dark" content="含氨系统出水量" placement="top">
                <p class="waterp waterp65" @click="getSPCcharts('含氨系统出水量')">{{ getScdvalue("含氨系统出水量") }}</p>
              </px-tooltip>
              <!-- 含氟系统排水量 -->
              <px-tooltip class="box-item" effect="dark" content="含氟系统出水" placement="top">
                <p class="waterp waterp66" @click="getSPCcharts('含氟系统出水量')">{{ getScdvalue("含氟系统排水量") }}</p>
              </px-tooltip>
              <!-- 含铜系统出水量 -->
              <px-tooltip class="box-item" effect="dark" content="含铜系统出水量" placement="top">
                <p class="waterp waterp67" @click="getSPCcharts('含铜系统出水量')">{{ getScdvalue("含铜系统出水量") }}</p>
              </px-tooltip>
              <!-- 含钴系统出水量 -->
              <px-tooltip class="box-item" effect="dark" content="含钴系统出水量" placement="top">
                <p class="waterp waterp68" @click="getSPCcharts('含钴系统出水量')">{{ getScdvalue("含钴系统出水量") }}</p>
              </px-tooltip>
              <!-- 仪表及地坑排水 -->
              <px-tooltip class="box-item" effect="dark" content="仪表及地坑排水" placement="top">
                <p class="waterp waterp69" @click="getSPCcharts('仪表及地坑排水')">{{ getScdvalue("仪表及地坑排水") }}</p>
              </px-tooltip>

              <!-- 含氨系统出水量 -->
              <px-tooltip class="box-item" effect="dark" content="含氨系统出水量" placement="top">
                <p class="waterp waterp70" @click="getSPCcharts('含氨系统出水量')">{{ getScdvalue("含氨系统出水量") }}</p>
              </px-tooltip>
              <!-- 含氟系统排水量及含氨系统出水量 -->
              <px-tooltip class="box-item" effect="dark" content="含氟废水出水及含氨系统出水量" placement="top">
                <p class="waterp waterp71" @click="getSPCcharts('含氟废水出水及含氨系统出水')">{{ getScdvalue("含氟废水出水及含氨系统出水") }}</p>
              </px-tooltip>
              <!-- 酸性废水处理塔及LOCALSCRUBBER再生排水量 -->
              <px-tooltip class="box-item" effect="dark" content="酸性废水处理塔及LOCAL SCRUBBER再生排水量" placement="top">
                <p class="waterp waterp72" @click="getSPCcharts('酸性废水处理塔及LOCALSCRUBBER再生排水量')">
                  {{ getScdvalue("酸性废水处理塔及LOCALSCRUBBER再生排水量") }}
                </p>
              </px-tooltip>

              <!-- 厂区污水排放口进水量 -->
              <px-tooltip class="box-item" effect="dark" content="厂区污水排放口进水量" placement="top">
                <p class="waterp waterp73" @click="getSPCcharts('厂区污水排放口进水量')">{{ getScdvalue("厂区污水排放口进水量") }}</p>
              </px-tooltip>
              <!-- 厂区污水排放口出水量 -->
              <px-tooltip class="box-item" effect="dark" content="厂区污水排放口出水量" placement="top">
                <p class="waterp waterp74" @click="getSPCcharts('厂区污水排放口出水量')">{{ getScdvalue("厂区污水排放口出水量") }}</p>
              </px-tooltip>

              <!-- WWT中水供水 -->
              <px-tooltip class="box-item" effect="dark" content="LSR中水补水" placement="top">
                <p class="waterp waterp75" @click="getSPCcharts('WWT中水供水')">{{ getScdvalue("WWT中水供水") }}</p>
              </px-tooltip>
              <!-- 中水系统2供水量 -->
              <px-tooltip class="box-item" effect="dark" content="WWT中水供水" placement="top">
                <p class="waterp waterp76" @click="getSPCcharts('WWT中水供水')">{{ getScdvalue("WWT中水供水") }}</p>
              </px-tooltip>
              <!-- 生活用水排水量 -->
              <px-tooltip class="box-item" effect="dark" content="生活用水排水量" placement="top">
                <p class="waterp waterp77" @click="getSPCcharts('生活用水排水量')">{{ getScdvalue("生活用水排水量") }}</p>
              </px-tooltip>

              <!-- UPW至LSR补水 -->
              <px-tooltip class="box-item" effect="dark" content="UPW至LSR补水" placement="top">
                <p class="waterp waterp78" @click="getSPCcharts('UPW至LSR补水')">{{ getScdvalue("UPW至LSR补水") }}</p>
              </px-tooltip>
              <!-- LSR自来水补水 -->
              <px-tooltip class="box-item" effect="dark" content="LSR自来水补水" placement="top">
                <p class="waterp waterp79" @click="getSPCcharts('LSR自来水补水')">{{ getScdvalue("LSR自来水补水") }}</p>
              </px-tooltip>
              <!-- 加压中水进CUB供水量 -->
              <px-tooltip class="box-item" effect="dark" content="加压中水进CUB供水量" placement="top">
                <p class="waterp waterp80" @click="getSPCcharts('加压中水进CUB供水量')">{{ getScdvalue("加压中水进CUB供水量") }}</p>
              </px-tooltip>
              <!-- 中水系统1供水量 -->
              <px-tooltip class="box-item" effect="dark" content="中水系统1供水量" placement="top">
                <p class="waterp waterp81" @click="getSPCcharts('中水系统1供水量')">{{ getScdvalue("中水系统1供水量") }}</p>
              </px-tooltip>
              <!-- 市政再生水补废水站 -->
              <px-tooltip class="box-item" effect="dark" content="市政再生水补废水站" placement="top">
                <p class="waterp waterp82" @click="getSPCcharts('市政再生水补废水站')">{{ getScdvalue("市政再生水补废水站") }}</p>
              </px-tooltip>
              <!-- 冲厕用中水量 -->
              <px-tooltip class="box-item" effect="dark" content="冲厕用水量" placement="top">
                <p class="waterp waterp83" @click="getSPCcharts('冲厕用中水量')">{{ getScdvalue("冲厕用中水量") }}</p>
              </px-tooltip>
              <!-- 停车场用中水量 -->
              <px-tooltip class="box-item" effect="dark" content="停车场用水量" placement="top">
                <p class="waterp waterp84" @click="getSPCcharts('停车场用中水量')">{{ getScdvalue("停车场用中水量") }}</p>
              </px-tooltip>
              <!-- 绿化用中水量 -->
              <px-tooltip class="box-item" effect="dark" content="绿化用水量" placement="top">
                <p class="waterp waterp85" @click="getSPCcharts('绿化用中水量')">{{ getScdvalue("绿化用中水量") }}</p>
              </px-tooltip>
              <!-- 生活用水进水量 -->
              <px-tooltip class="box-item" effect="dark" content="生活用水进水量" placement="top">
                <p class="waterp waterp86" @click="getSPCcharts('生活用水进水量')">{{ getScdvalue("生活用水进水量") }}</p>
              </px-tooltip>
              <!-- 食堂用水进水量 -->
              <px-tooltip class="box-item" effect="dark" content="食堂用水进水量" placement="top">
                <p class="waterp waterp87" @click="getSPCcharts('食堂用水进水量')">{{ getScdvalue("食堂用水进水量") }}</p>
              </px-tooltip>

              <!-- 废水处理塔进水 -->
              <px-tooltip class="box-item" effect="dark" content="废气处理塔进水" placement="top">
                <p class="waterp waterp88" @click="getSPCcharts('废水处理塔进水')">{{ getScdvalue("废水处理塔进水") }}</p>
              </px-tooltip>
              <!-- 冷却塔用水 -->
              <px-tooltip class="box-item" effect="dark" content="冷却塔用水量" placement="top">
                <p class="waterp waterp89" @click="getSPCcharts('冷却塔用水')">{{ getScdvalue("冷却塔用水") }}</p>
              </px-tooltip>
              <!-- 中水系统1补废水站 -->
              <px-tooltip class="box-item" effect="dark" content="中水系统1补废水站" placement="top">
                <p class="waterp waterp90" @click="getSPCcharts('中水系统1补废水站')">{{ getScdvalue("中水系统1补废水站") }}</p>
              </px-tooltip>
              <!-- 冲厕用中水消耗量 -->
              <px-tooltip class="box-item" effect="dark" content="冲厕用中水消耗量" placement="top">
                <p class="waterp91" @click="getSPCcharts('冲厕用中水消耗量')">消耗：{{ getScdvalue("冲厕用中水消耗量") }}</p>
              </px-tooltip>
              <!-- 停车场用中水消耗量 -->
              <px-tooltip class="box-item" effect="dark" content="停车场用中水消耗量" placement="top">
                <p class="waterp92" @click="getSPCcharts('停车场用中水消耗量')">消耗：{{ getScdvalue("停车场用中水消耗量") }}</p>
              </px-tooltip>
              <!-- 生活用水消耗 -->
              <px-tooltip class="box-item" effect="dark" content="生活用水消耗" placement="top">
                <p class="waterp93" @click="getSPCcharts('生活用水消耗')">消耗：{{ getScdvalue("生活用水消耗") }}</p>
              </px-tooltip>
              <!-- 食堂用水消耗 -->
              <px-tooltip class="box-item" effect="dark" content="食堂用水消耗" placement="top">
                <p class="waterp94" @click="getSPCcharts('食堂用水消耗')">消耗：{{ getScdvalue("食堂用水消耗") }}</p>
              </px-tooltip>

              <!-- 制程排至LOCALSCRUBBER水量 -->
              <px-tooltip class="box-item" effect="dark" content="DLS排水量" placement="top">
                <p class="waterp waterp95" @click="getSPCcharts('制程排至LOCALSCRUBBER水量')">
                  {{ getScdvalue("制程排至LOCALSCRUBBER水量") }}
                </p>
              </px-tooltip>
              <!-- LSR供水量 -->
              <px-tooltip class="box-item" effect="dark" content="LSR供水量" placement="top">
                <p class="waterp waterp96" @click="getSPCcharts('LSR供水量')">{{ getScdvalue("LSR供水量") }}</p>
              </px-tooltip>
              <!-- 酸性废水处理塔消耗量 -->
              <px-tooltip class="box-item" effect="dark" content="酸性废水处理塔消耗量" placement="top">
                <p class="waterp97" @click="getSPCcharts('酸性废水处理塔消耗量')">消耗：{{ getScdvalue("酸性废水处理塔消耗量") }}</p>
              </px-tooltip>
              <!-- 碱性废水处理塔消耗量 -->
              <px-tooltip class="box-item" effect="dark" content="碱性废水处理塔消耗量" placement="top">
                <p class="waterp98" @click="getSPCcharts('碱性废水处理塔消耗量')">消耗：{{ getScdvalue("碱性废水处理塔消耗量") }}</p>
              </px-tooltip>
              <!-- 冷却循环水蒸发量 -->
              <div class="waterp99">
                <px-tooltip class="box-item" effect="dark" content="冷却循环水蒸发量" placement="top">
                  <p style="float: left; min-width: 45px; margin-right: 2px" @click="getSPCcharts('冷却循环水蒸发量')">
                    蒸发：{{ getScdvalue("冷却循环水蒸发量") }}
                  </p>
                </px-tooltip>
                <px-tooltip class="box-item" effect="dark" content="冷却循环水风吹量" placement="top">
                  <p style="float: left; min-width: 45px" @click="getSPCcharts('冷却循环水风吹量')">风吹：{{ getScdvalue("冷却循环水风吹量") }}</p>
                </px-tooltip>
              </div>

              <!-- 冷却循环水风吹量 -->

              <!-- 冲厕排水量 -->
              <px-tooltip class="box-item" effect="dark" content="冲厕排水量" placement="top">
                <p class="waterp waterp101" @click="getSPCcharts('冲厕排水量')">{{ getScdvalue("冲厕排水量") }}</p>
              </px-tooltip>
              <!-- 停车场排水量 -->
              <px-tooltip class="box-item" effect="dark" content="停车场排水量" placement="top">
                <p class="waterp waterp102" @click="getSPCcharts('停车场排水量')">{{ getScdvalue("停车场排水量") }}</p>
              </px-tooltip>
              <!-- 生活用水排水量 -->
              <px-tooltip class="box-item" effect="dark" content="生活用水排水量" placement="top">
                <p class="waterp waterp103" @click="getSPCcharts('生活用水排水量')">{{ getScdvalue("生活用水排水量") }}</p>
              </px-tooltip>
              <!-- 食堂用水排水量 -->
              <px-tooltip class="box-item" effect="dark" content="食堂用水排水量" placement="top">
                <p class="waterp waterp104" @click="getSPCcharts('食堂用水排水量')">{{ getScdvalue("食堂用水排水量") }}</p>
              </px-tooltip>

              <!-- 停车场及冲厕总排水量 -->
              <px-tooltip class="box-item" effect="dark" content="停车场及冲厕总排水量" placement="top">
                <p class="waterp waterp105" @click="getSPCcharts('停车场及冲厕总排水量')">{{ getScdvalue("停车场及冲厕总排水量") }}</p>
              </px-tooltip>
              <!-- 化粪池进水量 -->
              <px-tooltip class="box-item" effect="dark" content="化粪池进水量" placement="top">
                <p class="waterp waterp106" @click="getSPCcharts('化粪池进水量')">{{ getScdvalue("化粪池进水量") }}</p>
              </px-tooltip>
              <!-- 化粪池出水量 -->
              <px-tooltip class="box-item" effect="dark" content="化粪池出水量" placement="top">
                <p class="waterp waterp107" @click="getSPCcharts('化粪池出水量')">{{ getScdvalue("化粪池出水量") }}</p>
              </px-tooltip>
              <!-- 隔油池出水量 -->
              <px-tooltip class="box-item" effect="dark" content="隔油池出水量" placement="top">
                <p class="waterp waterp108" @click="getSPCcharts('隔油池出水量')">{{ getScdvalue("隔油池出水量") }}</p>
              </px-tooltip>
              <!-- 化粪池及隔油池排水量总量 -->
              <px-tooltip class="box-item" effect="dark" content="化粪池及隔油池排水量总量" placement="top">
                <p class="waterp waterp109" @click="getSPCcharts('化粪池及隔油池排水量总量')">{{ getScdvalue("化粪池及隔油池排水量总量") }}</p>
              </px-tooltip>
              <!-- 生活污水进水 -->
              <px-tooltip class="box-item" effect="dark" content="生活污水进水" placement="top">
                <p class="waterp waterp110" @click="getSPCcharts('生活污水进水')">{{ getScdvalue("生活污水进水") }}</p>
              </px-tooltip>
              <!-- 生活污水出水 -->
              <px-tooltip class="box-item" effect="dark" content="生活污水出水量" placement="top">
                <p class="waterp waterp111" @click="getSPCcharts('生活污水出水')">{{ getScdvalue("生活污水出水") }}</p>
              </px-tooltip>
            </div>
            <modelTitle style="position: absolute; top: 16px; left: 16px" :title="'水平衡图'" />
            <p class="waterTitle">注：雨水回收、冷凝水回收不计入水平衡计算</p>
            <!-- <div class="iframe-content">
              <iframe src="http://10.110.210.159:9091/#/openview/0cc4fd2e2d8f12aa?preview=1&page=m0snntvg" width="100%" height="100%" frameborder="0" />
            </div> -->

            <div style="position: absolute; top: 60px">
              <px-button :icon="Plus" circle @click="bigimg" />
              <px-button :icon="Minus" circle @click="smailimg" />
            </div>
          </px-scrollbar>
        </px-col>
      </px-row>
      <px-row style="margin-top: 16px">
        <px-col :span="24" class="water_col">
          <div class="waterdom borderRidus boxShadow first_width">
            <modelTitle :title="'回收率'" />
            <px-table v-loading="loading" style="margin-top: 16px" :data="itemList" border>
              <px-table-column label="回收率指标" prop="content">
                <template #default="scope">
                  <span>{{ scope.row.content }}</span>
                </template>
              </px-table-column>
              <px-table-column label="数值" prop="recovery">
                <template #default="scope">
                  <span>{{ scope.row.recovery }}</span>
                </template>
              </px-table-column>
              <template #empty>
                <px-empty :image-size="150" />
              </template>
            </px-table>
          </div>
        </px-col>
      </px-row>
    </div>
    <img id="print-img" :src="imageUrl" />
    <px-dialog v-model="analyzevisual" draggable clickHideContent title="关联分析-指标添加" width="1431" style="height: 95%" align-center>
      <spcAnalyze :spcJob="spcJob" style="height: 100%" />
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
import Alarm from "./components/alarm.vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import waterFire from "./waterFire.vue";
import { Plus, Minus } from "@px-ui/icons-vue";
import EquilibriumEvent from "./components/equilibriumEvent.vue";
import { getCurrentInstance, ref, toRefs, reactive, onMounted } from "vue";
import { balancequerySubmitStatus, pidqueryWaterBalance, pidqueryWaterBalanceSpcWarn, pidqueryWaterBalanceUnitSpcWarn } from "@/api/waterBalance";
import { spcIndicatorquerySpcAnalysisResultList } from "@/api/spc";
import spcAnalyze from "@/views/water/spc/spcsearch/spcAnalyze.vue";
import printJS from "print-js";
import html2canvas from "html2canvas";
import { useDraggable } from "@vueuse/core";
import { useTemplateRef } from "vue";
const el = useTemplateRef<HTMLElement>("el");
const { x, y, style } = useDraggable(el, {
  initialValue: { x: 40, y: 40 }
});
const analyzevisual = ref(false);
const bigimg = () => {
  if (imgscale.value < 1.9) {
    imgscale.value = imgscale.value + 0.1;
  }
};
const smailimg = () => {
  if (imgscale.value > 0.4) {
    imgscale.value = imgscale.value - 0.1;
  }
};
const tableElement = ref(null);
const imageUrl = ref(null);
const totalCount = ref(46);
const totalOocCount = ref(18);
const totalOosCount = ref(12);
const totalOowCount = ref(16);
const printFile = () => {
  console.log(tableElement.value);
  if (tableElement.value) {
    const content = document.getElementById("print-content");
    let rect = content.getBoundingClientRect();
    html2canvas(content)
      .then(canvas => {
        console.log(rect);
        imageUrl.value = canvas.toDataURL("image/png");
        setTimeout(() => {
          printJS({
            printable: "print-img",
            type: "html",
            style: `
         @media print{
          body,html{
            margin:0;
            padding:0;
            width:100%;
            height:${rect.height * (1080 / rect.width)}px;
          }
          #print-img {
            width:1080px;
            transform-origin:top left;
          }
          img.print-full-page{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            object-fit:cover;
            page-break-before:always;
            page-break-after:always;
            background:white;
          }
         @page {margin: 1cm;}
          }
          `, // 去掉页眉页脚
            scanStyles: false,
            // targetStyles: ['*'],
            header: null,
            documentTitle: "水课抄表"
          });
        }, 100);
      })
      .catch(error => {
        console.log("Error", error);
      });
  }
};
const data = reactive({
  nameSpanMap: {},
  queryParams: {
    indicatorName: "",
    classCode: "",
    systemCode: "",
    indicatorLevel: "",
    startTime: "",
    endTime: "",
    pageNum: 1,
    pageSize: 20
  },
  itemList: [
    {
      time: "2024-05-26",
      content: "UPW Recovery ratio(广义) =（各厂F/R+L/R回收水量）/制程消耗UPW的水量",
      recovery: "3.47%",
      formula: "(AO37 + AO35) / AO33"
    },
    {
      time: "2024-05-26",
      content: "Total Recovery ratio =（各厂F/R+L/R回收水量+RO conc.+UF conc.+反洗水+雨水+冷凝水）/    (分子部分-雨水-冷凝水+市政抄表数据）",
      recovery: "44.31%",
      formula: "(AB35 + AB37 + AA43+Q40+O56+O70) / (AB35 + AB37 + AA43+Q40+D54)"
    },
    {
      time: "2024-05-26",
      content: "UPW Recovery ratio(狭义) =（各厂F/R+L/R回收到UPW T-201的水量）/         制程消耗UPW的水量",
      recovery: "13.1%",
      formula: "AB37 / K35"
    }
  ],
  tabvalue: [],
  Statusvalue: {},
  Balancevalue: {},
  imgscale: 1,
  statisticsDataList: {},
  spcJob: [
    {
      jobId: "",
      indicatorName: ""
    }
  ],
  spcJobList: [],
  spcwarringJobList: []
});
const dateSpc = ref([]);
const onDragEnd = event => {
  console.log(event);
};
const loading = ref(false);
const activeName = ref("oos");
const { queryParams, statisticsDataList, spcJob, spcJobList, spcwarringJobList, itemList, nameSpanMap, tabvalue, Statusvalue, imgscale } =
  toRefs(data);
const handleQuery = () => {
  getList();
};
const resetQuery = () => {};
function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}
function formatDate2(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day}`;
}
const getScdvalue = val => {
  return statisticsDataList.value[val];
};

const getSPCcharts = val => {
  spcJob.value = [spcJobList.value.filter(item => item.apiKey == val)[0]].map(item => {
    return {
      jobId: item.spcJob,
      indicatorName: item.apiKey
    };
  });
  console.log(spcJob.value);

  setTimeout(() => {
    analyzevisual.value = true;
  }, 100);
};
const getList = () => {
  balancequerySubmitStatus({
    queryDate: queryParams.value.startTime
  }).then(res => {
    console.log(res);
    Statusvalue.value = res;
  });
  pidqueryWaterBalance({
    queryDate: queryParams.value.startTime
  }).then(res => {
    console.log(res);
    statisticsDataList.value = res.statisticsData;
    itemList.value[0].recovery = `${res.statisticsData["广义回收率"] * 100}%`;
    itemList.value[1].recovery = `${res.statisticsData["总回收率"] * 100}%`;
    itemList.value[2].recovery = `${res.statisticsData["Rinse制程回收率"] * 100}%`;
  });

  pidqueryWaterBalanceSpcWarn({
    queryDate: queryParams.value.startTime.split(" ")[0]
  }).then(res => {
    console.log(res);
    spcJobList.value = res.details;
  });
  pidqueryWaterBalanceUnitSpcWarn({
    queryDate: queryParams.value.startTime.split(" ")[0]
  }).then(res => {
    console.log(res);
    spcwarringJobList.value = res.details;
  });
};

const getwarring = warring => {
  if (spcJobList.value.length > 0) {
    console.log(spcJobList.value.filter(item => item.apiKey == warring)[0].isWarn);
    return spcJobList.value.filter(item => item.apiKey == warring)[0].isWarn ? true : false;
  }
};
const getwarring2 = warring => {
  if (spcwarringJobList.value.length > 0) {
    console.log(spcwarringJobList.value.filter(item => item.balanceUnit == warring)[0].isWarn);
    return spcwarringJobList.value.filter(item => item.balanceUnit == warring)[0].isWarn ? true : false;
  }
};
onMounted(() => {
  const end = new Date();
  const start = new Date();
  start.setHours(0, 0, 0, 0);
  start.setTime(start.getTime());
  nameSpanMap.value = {};
  let currentSpan = 0;
  queryParams.value.startTime = formatDate(start);
  if (itemList.value.length > 0) {
    itemList.value.forEach((row, index) => {
      row.time = formatDate2(start);
      if (index === 0 || itemList.value[index - 1].time !== row.time) {
        currentSpan = 1;
        nameSpanMap.value[row.time] = {
          rowIndex: index,
          rowspan: 1
        };
      } else {
        currentSpan++;
        nameSpanMap.value[row.time].rowspan = currentSpan;
      }
    });
  }
  getList();
});
</script>

<style scoped lang="scss">
.water_col {
  height: 100%;
}

.iframe-content {
  position: relative;
  top: 30px;
  width: 100%;
  height: 800px;
}

.waterdom {
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;

  .iframe-content {
    position: relative;
    width: 1614px;
    height: 900px;
    transform-origin: 0 0;
  }

  .waterImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}

.first_width {
  width: calc(100% - 16px);
}

.model_chart {
  position: relative;
  width: 100%;
  height: calc(100% - 40px);

  .co2img {
    position: absolute;
    top: 32px;
    left: 22px;
    width: 32px;
    height: 32px;
  }

  .titlep {
    position: absolute;
    top: 29px;
    left: 70px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
  }

  .titlevalue {
    position: absolute;
    top: 55px;
    left: 70px;

    .titlevalue1 {
      float: left;
      font-size: 20px;
      font-weight: 600;
      line-height: 28px;
      color: #3b82f6;
    }

    .titlevalue1span {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      color: #4f4f4f;
    }

    .titlevalue2 {
      float: left;
      margin-top: 5px;
      margin-left: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
    }

    .titlevalue2span {
      display: inline-block;
      margin-left: 8px;
      font-size: 14px;
      line-height: 20px;
      color: #f87171;
    }
  }

  .co2mian {
    position: absolute;
    top: 112px;
    left: 0;
    width: 100%;
    height: 92px;
  }

  .co2mianleft {
    float: left;
    width: 50%;
    height: 100%;

    .co2mianleftp {
      width: calc(100% - 21px);
      height: 22px;
      padding-left: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
      border-right: 1px solid #cbcdd8;
    }
  }

  .co2mianright {
    float: left;
    width: 50%;
    height: 100%;

    .co2mianrightp {
      width: calc(100% - 45px);
      height: 22px;
      padding-left: 45px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #000;
    }
  }

  .co2mianleftp2 {
    margin-left: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #3b82f6;

    .co2mianleftp2span {
      font-size: 14px;
      font-weight: 400;
      color: #4f4f4f;
    }
  }

  .co2mianleftp3 {
    float: left;
    margin-left: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #000;

    .titlevalue2span {
      display: inline-block;
      margin-left: 8px;
      font-size: 14px;
      line-height: 20px;
      color: #34d399;
    }
  }
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 26px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}

.percentage-value2 {
  display: block;
  margin-top: 10px;
  font-size: 20px;
}

.percentage-label2 {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}

.percentage-value3 {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  color: #f00;
}

.percentage-label3 {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: #f00;
}

.jindu1 {
  margin: 24px 0 0 17px;
}

.jindu2 {
  margin: 38px calc((100% - 103px) / 2);
}

.jindu1p {
  width: calc(100% - 24px);
  margin-top: 0;
  font-size: 16px;
  text-align: center;
}

.jindu2p {
  width: 100%;
  margin-top: -40px;
  font-size: 14px;
  text-align: center;
}

.waterTitle {
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #3b82f6;
  background: white;
}

.waterLengend {
  width: 580px;
  height: 20px;
  margin: 20px auto;
}

.lengendList {
  float: left;
  margin-right: 24px;
  font-size: 12px;

  .listColor1 {
    display: inline-block;
    width: 12px;
    height: 8px;
    margin-right: 5px;
    background: #ffe3d4;
  }

  .color2 {
    background: #35d900;
  }

  .color3 {
    background: #ffe58d;
  }

  .color4 {
    background: #3b82f6;
  }

  .color5 {
    background: #d9d9d9;
  }
}

:deep(.px-table .cell) {
  line-height: 30px;
  vertical-align: middle;
}

#print-img {
  position: fixed;
  left: -200000px;
  width: 100%;
}

.waterp {
  position: absolute;
  width: 30px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  cursor: pointer;
}

.waterimg {
  cursor: pointer;
}

.waterp1 {
  position: absolute;
  top: 462px;
  left: 40px;
  width: 30px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
}

.waterp1-2 {
  position: absolute;
  top: 462px;
  left: 70px;
  width: 65px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
}

.waterimg1 {
  position: absolute;
  top: 413px;
  left: 31px;
  width: 17px;
}

.waterp2 {
  position: absolute;
  top: 862px;
  left: 71px;
  width: 30px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
}

.waterimg2 {
  position: absolute;
  top: 813px;
  left: 31px;
  width: 17px;
}

.waterp3 {
  position: absolute;
  top: 35px;
  left: 390px;
  width: 30px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
}

.waterimg3 {
  position: absolute;
  top: 32px;
  left: 247px;
  width: 17px;
}

.waterp4 {
  position: absolute;
  top: 101px;
  left: 273px;
  width: 30px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
}

.waterp112 {
  position: absolute;
  top: 179px;
  left: 273px;
  width: 30px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  background-color: #fff2db;
}

.waterp113 {
  position: absolute;
  top: 203px;
  left: 273px;
  width: 30px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  background-color: #fff2db;
}

.waterp114 {
  position: absolute;
  top: 226px;
  left: 273px;
  width: 30px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  background-color: #b1e390;
}

.waterp115 {
  position: absolute;
  top: 377px;
  left: 273px;
  width: 30px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  background-color: #fff2db;
}

.waterp116 {
  position: absolute;
  top: 377px;
  left: 199px;
  width: 30px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  background-color: #fff2db;
}

.waterp117 {
  top: 153px;
  left: 670px;
  background-color: #b1e390;
}

.waterimg4 {
  position: absolute;
  top: 103px;
  left: 345px;
  width: 17px;
}

.waterp5 {
  position: absolute;
  top: 126px;
  left: 323px;
  width: 30px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
}

.waterp6 {
  position: absolute;
  top: 152px;
  left: 366px;
  width: 30px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
}

.waterimg6 {
  position: absolute;
  top: 103px;
  left: 345px;
  width: 17px;
}

.waterp7 {
  position: absolute;
  top: 226px;
  left: 199px;
  width: 30px;
  height: 15px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
}

.waterimg8 {
  position: absolute;
  top: 199px;
  left: 316px;
  width: 17px;
}

.waterimg9 {
  position: absolute;
  top: 342px;
  left: 309px;
  width: 17px;
}

.waterimg10 {
  position: absolute;
  top: 453px;
  left: 316px;
  width: 17px;
}

.waterimg11 {
  position: absolute;
  top: 509px;
  left: 308px;
  width: 17px;
}

.waterimg12 {
  position: absolute;
  top: 616px;
  left: 308px;
  width: 17px;
}

.waterimg13 {
  position: absolute;
  top: 672px;
  left: 316px;
  width: 17px;
}

.waterimg14 {
  position: absolute;
  top: 775px;
  left: 303px;
  width: 17px;
}

.waterimg15 {
  position: absolute;
  top: 847px;
  left: 300px;
  width: 17px;
}

.waterimg16 {
  position: absolute;
  top: 211px;
  left: 792px;
  width: 17px;
}

.waterimg17 {
  position: absolute;
  top: 359px;
  left: 792px;
  width: 17px;
}

.waterimg18 {
  position: absolute;
  top: 426px;
  left: 802px;
  width: 17px;
}

.waterimg19 {
  position: absolute;
  top: 476px;
  left: 802px;
  width: 17px;
}

.waterimg20 {
  position: absolute;
  top: 526px;
  left: 792px;
  width: 17px;
}

.waterimg21 {
  position: absolute;
  top: 576px;
  left: 822px;
  width: 17px;
}

.waterimg22 {
  position: absolute;
  top: 623px;
  left: 702px;
  width: 17px;
}

.waterimg23 {
  position: absolute;
  top: 672px;
  left: 682px;
  width: 17px;
}

.waterimg24 {
  position: absolute;
  top: 720px;
  left: 682px;
  width: 17px;
}

.waterimg25 {
  position: absolute;
  top: 774px;
  left: 702px;
  width: 17px;
}

.waterimg26 {
  position: absolute;
  top: 824px;
  left: 702px;
  width: 17px;
}

.waterimg27 {
  position: absolute;
  top: 774px;
  left: 978px;
  width: 17px;
}

.waterimg28 {
  position: absolute;
  top: 824px;
  left: 961px;
  width: 17px;
}

.waterimg29 {
  position: absolute;
  top: 801px;
  left: 1238px;
  width: 17px;
}

.waterimg30 {
  position: absolute;
  top: 86px;
  left: 1242px;
  width: 17px;
}

.waterimg31 {
  position: absolute;
  top: 134px;
  left: 1242px;
  width: 17px;
}

.waterimg32 {
  position: absolute;
  top: 184px;
  left: 1242px;
  width: 17px;
}

.waterimg33 {
  position: absolute;
  top: 232px;
  left: 1242px;
  width: 17px;
}

.waterimg34 {
  position: absolute;
  top: 291px;
  left: 1242px;
  width: 17px;
}

.waterimg35 {
  position: absolute;
  top: 359px;
  left: 1242px;
  width: 17px;
}

.waterimg36 {
  position: absolute;
  top: 503px;
  left: 1439px;
  width: 17px;
}

.waterp9 {
  top: 267px;
  left: 308px;
}

.waterp10 {
  top: 251px;
  left: 397px;
}

.waterp11 {
  top: 411px;
  left: 308px;
}

.waterp12 {
  top: 394px;
  left: 399px;
}

.waterp13 {
  top: 416px;
  left: 450px;
}

.waterp14 {
  top: 455px;
  left: 199px;
}

.waterp15 {
  top: 477px;
  left: 199px;
}

.waterp16 {
  top: 511px;
  left: 267px;
}

.waterp17 {
  top: 555px;
  left: 267px;
}

.waterp18 {
  top: 617px;
  left: 267px;
}

.waterp19 {
  top: 675px;
  left: 267px;
}

.waterp20 {
  top: 731px;
  left: 267px;
}

.waterp21 {
  top: 777px;
  left: 267px;
}

.waterp22 {
  top: 848px;
  left: 267px;
}

.waterp23 {
  top: 617px;
  left: 435px;
}

.waterp24 {
  top: 651px;
  left: 369px;
}

.waterp25 {
  top: 295px;
  left: 354px;
}

.waterp26 {
  top: 455px;
  left: 436px;
}

.waterp27 {
  top: 293px;
  left: 457px;
}

.waterp28 {
  top: 293px;
  left: 501px;
}

.waterp29 {
  top: 325px;
  left: 457px;
}

.waterp30 {
  top: 325px;
  left: 501px;
}

.waterp31 {
  top: 293px;
  left: 543px;
}

.waterp32 {
  top: 325px;
  left: 543px;
}

.waterp33 {
  top: 356px;
  left: 501px;
  width: 32px;
  height: 16px;
  background: white;
}

.waterp34 {
  top: 357px;
  left: 543px;
}

.waterp35 {
  top: 200px;
  left: 543px;
}

.waterp36 {
  top: 232px;
  left: 543px;
}

.waterp37 {
  top: 263px;
  left: 543px;
}

.waterp38 {
  top: 263px;
  left: 641px;
}

.waterp39 {
  top: 263px;
  left: 721px;
}

.waterp40 {
  top: 169px;
  left: 721px;
}

.waterp41 {
  top: 200px;
  left: 721px;
}

.waterp42 {
  top: 294px;
  left: 725px;
}

.waterp43 {
  top: 294px;
  left: 905px;
}

.waterp44 {
  top: 311px;
  left: 1083px;
}

.waterp45 {
  top: 293px;
  left: 1133px;
}

.waterp46 {
  top: 293px;
  left: 1203px;
}

.waterp47 {
  top: 293px;
  left: 1377px;
}

.waterp48 {
  top: 185px;
  left: 936px;
}

.waterp49 {
  top: 200px;
  left: 936px;
}

.waterp50 {
  top: 216px;
  left: 936px;
}

.waterp51 {
  top: 232px;
  left: 936px;
}

.waterp52 {
  top: 248px;
  left: 936px;
}

.waterp53 {
  top: 264px;
  left: 936px;
}

.waterp54 {
  top: 324px;
  left: 906px;
}

.waterp55 {
  top: 361px;
  left: 937px;
}

.waterp56 {
  top: 428px;
  left: 937px;
}

.waterp57 {
  top: 478px;
  left: 937px;
}

.waterp58 {
  top: 527px;
  left: 937px;
}

.waterp59 {
  top: 88px;
  left: 1203px;
}

.waterp60 {
  top: 137px;
  left: 1203px;
}

.waterp61 {
  top: 184px;
  left: 1203px;
}

.waterp62 {
  top: 239px;
  left: 1203px;
}

.waterp63 {
  top: 268px;
  left: 1203px;
}

.waterp64 {
  top: 360px;
  left: 1203px;
}

.waterp65 {
  top: 88px;
  left: 1377px;
}

.waterp66 {
  top: 136px;
  left: 1377px;
}

.waterp67 {
  top: 185px;
  left: 1377px;
}

.waterp68 {
  top: 234px;
  left: 1377px;
}

.waterp69 {
  top: 268px;
  left: 1377px;
}

.waterp70 {
  top: 88px;
  left: 1067px;
}

.waterp71 {
  top: 137px;
  left: 1118px;
}

.waterp72 {
  top: 347px;
  left: 1138px;
}

.waterp73 {
  top: 481px;
  left: 1507px;
}

.waterp74 {
  top: 575px;
  left: 1507px;
}

.waterp75 {
  top: 506px;
  left: 527px;
}

.waterp76 {
  top: 674px;
  left: 561px;
}

.waterp77 {
  top: 778px;
  left: 561px;
}

.waterp78 {
  top: 357px;
  left: 658px;
}

.waterp79 {
  top: 384px;
  left: 658px;
}

.waterp80 {
  top: 430px;
  left: 701px;
}

.waterp81 {
  top: 455px;
  left: 658px;
}

.waterp82 {
  top: 596px;
  left: 658px;
}

.waterp83 {
  top: 625px;
  left: 640px;
}

.waterp84 {
  top: 674px;
  left: 640px;
}

.waterp85 {
  top: 722px;
  left: 640px;
}

.waterp86 {
  top: 777px;
  left: 640px;
}

.waterp87 {
  top: 826px;
  left: 640px;
}

.waterp88 {
  top: 430px;
  left: 761px;
}

.waterp89 {
  top: 529px;
  left: 761px;
}

.waterp90 {
  top: 577px;
  left: 761px;
}

.waterp91 {
  position: absolute;
  top: 654px;
  left: 724px;
  min-width: 45px;
  height: 16px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  text-align: left;
  cursor: pointer;
  background: #b1e390;
}

.waterp92 {
  position: absolute;
  top: 703px;
  left: 724px;
  min-width: 45px;
  height: 16px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  text-align: left;
  cursor: pointer;
  background: #b1e390;
}

.waterp93 {
  position: absolute;
  top: 806px;
  left: 724px;
  min-width: 45px;
  height: 16px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  text-align: left;
  cursor: pointer;
  background: #b1e390;
}

.waterp94 {
  position: absolute;
  top: 855px;
  left: 724px;
  min-width: 45px;
  height: 16px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  text-align: left;
  cursor: pointer;
  background: #b1e390;
}

.waterp95 {
  top: 322px;
  left: 838px;
}

.waterp96 {
  top: 405px;
  left: 853px;
}

.waterp97 {
  position: absolute;
  top: 457px;
  left: 846px;
  min-width: 45px;
  height: 16px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  text-align: left;
  cursor: pointer;
  background: #fff2db;
}

.waterp98 {
  position: absolute;
  top: 507px;
  left: 846px;
  min-width: 45px;
  height: 16px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  text-align: left;
  cursor: pointer;
  background: #fff2db;
}

.waterp99 {
  position: absolute;
  top: 558px;
  left: 821px;
  min-width: 45px;
  height: 16px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  text-align: left;
  cursor: pointer;
  background: #fff2db;
}

.waterp100 {
  position: absolute;
  top: 558px;
  left: 870px;
  min-width: 45px;
  height: 16px;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
  text-align: left;
  cursor: pointer;
  background: #fff2db;
}

.waterp101 {
  top: 625px;
  left: 856px;
}

.waterp102 {
  top: 674px;
  left: 856px;
}

.waterp103 {
  top: 778px;
  left: 856px;
}

.waterp104 {
  top: 826px;
  left: 856px;
}

.waterp105 {
  top: 726px;
  left: 898px;
}

.waterp106 {
  top: 773px;
  left: 921px;
}

.waterp107 {
  top: 777px;
  left: 1091px;
}

.waterp108 {
  top: 827px;
  left: 1091px;
}

.waterp109 {
  top: 804px;
  left: 1146px;
}

.waterp110 {
  top: 804px;
  left: 1201px;
}

.waterp111 {
  top: 804px;
  left: 1372px;
}
</style>
